<template>
	<view class="header" @touchstart='touchstart' @touchmove='touchmove'>
		<!-- <u-sticky offset-top="0"> -->
		<view style="position: fixed;width: 100%;z-index: 50;">
			<!-- <transition name="fade"> -->
			<view>
				<view style="background-color: #fff;" class="flex flex-ai-c search" :class="['nav',isBlock ? '' : 'nav-to']">
					<view style="width: 610rpx;margin-left: 24rpx;">
						<u-search @focus='focus' :focus="true" height="60" @change="change" :clearabled="true" v-model="searchKey"
						 placeholder="搜索品牌/车型" :show-action="false" @search="onSearch"></u-search>
					</view>
					<view class="text" @click="djSearch">搜索</view>
				</view>
				<view v-show="isSearch">
					<view v-for="(item,index) in searchList" :key='item.id' class="search-select">
						<view class="search-select2 flex flex-ai-c flex-jc-sb" @click="onSearchList(item)">
							<view class="search-text">{{item.carTypeName}}{{item.name.substr(0, 20)+'...'}}
							</view>
							<view class="flex flex-jc-fe flex-ai-c" style="flex: 1;">
								<view style="color: rgb(253,215,42);margin-right: 10rpx;">{{item.type===1?'去看车':'品牌直达'}}</view>
								<i-icon icon="iconsousuo" size="40rpx" color="rgb(253,215,42)" v-show='item.type===0'></i-icon>
								<u-icon name="arrow-right" size="40rpx" color="rgb(253,215,42)" v-show='item.type===1'></u-icon>
							</view>
					
						</view>
					</view>
				</view>
				

			</view>

			<!-- </transition> -->

			<!-- </u-sticky> -->
		</view>
		<!-- loding -->
		<view class="flex flex-jc-c" v-show="searchList.length===0 && isSj">
			暂无数据
		</view>
		<view class="flex flex-jc-c">
			<u-loading mode="flower" color="red" :show='isLoading'></u-loading>
		</view>


		<view class="hot" v-show="show">
			<view class="hot-title">热门搜索</view>
			<view class="hot-main flex flex-wrap-w">
				<view v-for="(item,index) in hotList" :key='item.id' class="hot-name flex flex-ai-c flex-jc-sb" @click="hotSearch(item)">
					<view>
						<image src="https://files.yzsheng.com/client/me/img/huo.png" style="width: 32rpx;height: 39rpx;"></image>
					</view>
					<view style="margin-left: 15rpx;">{{item.name}}</view>
				</view>
			</view>
		</view>
		<!-- 搜索历史 -->
		<view class="history" v-show="show">
			<view class="history-title flex flex-jc-sb flex-ai-c">
				<view>历史搜索</view>
				<view @click="del">
					<i-icon icon="iconshanchu2" size="44rpx" color="#666666"></i-icon>
				</view>
			</view>
			<view class="history-main flex flex-wrap-w">
				<view v-for="(item,index) in history" :key='index' class="history-name" @click="onhistory(item)">
					<view>{{item}}</view>
				</view>
			</view>
		</view>

		<!-- 好车推荐 -->
		<view style="margin-top:50rpx;" v-show="recommend">
			<view class="history">
				<view class="history-title">
					<view>好车推荐</view>
				</view>

			</view>
			<view style="padding: 20rpx;">
				<recommend :carlist='carlist'></recommend>
			</view>


		</view>
		<!-- 车源列表 -->
		<view class="carlist" v-show="listShow">
			<car-list :carlist='list'></car-list>
			<view class="defaultMap" v-show="list.length===0">
				<image src="https://files.yzsheng.com/bussiness/imgs/tu@2x.png"></image>
				<view class="texna">
					暂无更多信息，看看其他的吧
				</view>
			</view>
			<u-loadmore @loadmore="searchMore" :status="loadStatus" margin-top="50" v-show="list.length !== 0" />
		</view>
	</view>

</template>

<script src="./search.js"></script>

<style lang="scss" scoped>
	.fade-enter-active,
	.nav {
		transition: all 0.3s;
	}

	.fade-enter,
	.nav-to {
		opacity: 0;
		// height: 0;
		transform: translateY(-100rpx);
	}

	@import './search.scss';

	.search-select {
		width: 100%;

		.search-select2 {

			line-height: 100rpx;
			color: #000000;
			padding: 0 24rpx;
		}
	}

	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 750rpx;
		height: 85vh;
		text-align: center;

		image {
			width: 263rpx;
			height: 277rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}
</style>
